<template>
  <!-- 常用功能专栏 -->
  <div class="list_title">常用功能</div>
  <div class="map_list">
    <div>
      <div class="img_map_box" @click="showMark">
        <img src="@/assets/images/SQ.png" alt="" />
        <div class="map_active" v-show="SQ_flag">
          <img src="@/assets/images/input-checked.png" alt="" />
        </div>
      </div>
      <div>书签</div>
    </div>
    <div style="margin-left: 10px">
      <div class="img_map_box" @click="showOpinion">
        <img src="@/assets/images/YJGL.png" alt="" />
        <div class="map_active" v-show="YJGL_flag">
          <img src="@/assets/images/input-checked.png" alt="" />
        </div>
      </div>
      <div>意见管理</div>
    </div>
    <div style="margin-left: 10px">
      <div class="img_map_box" @click="showMeasurement">
        <img src="@/assets/images/CL.png" alt="" />
        <div class="map_active" v-show="CL_flag">
          <img src="@/assets/images/input-checked.png" alt="" />
        </div>
      </div>
      <div>测量</div>
    </div>
    <div style="margin-left: 10px">
      <div class="img_map_box" @click="showDraw">
        <img src="@/assets/images/HT.png" alt="" />
        <div class="map_active" v-show="HT_flag">
          <img src="@/assets/images/input-checked.png" alt="" />
        </div>
      </div>
      <div>绘图</div>
    </div>
  </div>
  <!-- 书签 -->
  <div class="vxe_box">
    <vxe-modal
      :mask="false"
      :marginSize="-500"
      :lock-view="false"
      v-model="demo2.value4"
      width="510"
      height="320"
      :position="{ top: 50, left: 7 }"
      @close="handleClose4"
    >
      <template #title>
        <span style="color: white">书签</span>
      </template>
      <template #default>
        <div class="el_btn">
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="95px"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
          >
            <el-form-item label="书签名称 :" prop="name">
              <el-input
                clearable
                v-model="ruleForm.name"
                placeholder="请输入名称"
              >
                <template #suffix>
                  <div class="suffix">
                    <img
                      style="width: 100%; height: 100%"
                      src="../../assets/images/亮色风格图集/手工输入.png"
                      alt=""
                    />
                  </div>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
          <div class="box_mark" id="box_mark">
            <div
              title="双击选中需要清除的的书签"
              id="item"
              v-for="(item, id) in arrData"
              :key="id"
              @click="
                getRowId(
                  item.id,
                  item.centerX,
                  item.centerY,
                  item.scaleLevel,
                  $event
                )
              "
            >
              <img src="../../assets/images/亮色风格图集/图片.png" />

              <div>{{ item.bookmarkName }}</div>
            </div>
          </div>
          <div class="save">
            <el-button type="info" @click="removeZoomCenter()">
              删除书签
            </el-button>
            <el-button type="primary" @click="setZoomCenter()">
              保存视角
            </el-button>
          </div>
        </div>
      </template>
    </vxe-modal>
  </div>
  <!-- 意见管理(储存单要素) -->
  <div class="vxe_box vxe_box_a">
    <vxe-modal
      :mask="false"
      :marginSize="-500"
      :lock-view="false"
      v-model="demo2.value1"
      width="490"
      height="360"
      :position="{ top: 50, left: 7 }"
      @close="handleClose2"
    >
      <template #title>
        <span style="color: white">意见管理</span>
      </template>
      <template #default>
        <div class="el_opinion">
          <el-form
            ref="loginFormRef"
            :model="form"
            label-width="100px"
            :rules="rulesYJ"
          >
            <el-form-item label="反映人员 :" prop="name">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="反映类型 :" prop="region">
              <el-select v-model="form.region" placeholder="数据错误">
                <el-option label="数据错误" value="数据错误" />
                <el-option label="数据缺失" value="数据缺失" />
                <el-option label="其他" value="其他" />
              </el-select>
            </el-form-item>
            <el-form-item label="问题等级 :" prop="level">
              <el-select v-model="form.level" placeholder="高">
                <el-option label="高" value="3" />
                <el-option label="中" value="2" />
                <el-option label="低" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="问题描述 :" prop="desc">
              <el-input v-model="form.desc" type="textarea" />
            </el-form-item>
            <el-form-item label="选择范围 :" prop="resource">
              <el-radio-group v-model="form.resource" @change="getTypeSelected">
                <el-radio label="Point">点</el-radio>
                <el-radio label="LineString">线</el-radio>
                <el-radio label="Polygon">面</el-radio>
                <!-- <el-radio label="Circle" value="Circle" /> -->
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <div class="option">
                <el-button type="info" @click="resetLoginForm">
                  重置并清空画布
                </el-button>
                <el-button type="primary" @click="onSubmit">提交意见</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </vxe-modal>
  </div>
  <!-- 测量 -->
  <div class="vxe_box vxe_box_a">
    <vxe-modal
      :mask="false"
      :marginSize="-500"
      :lock-view="false"
      v-model="demo2.value3"
      width="485"
      height="375"
      :position="{ top: 50, left: 7 }"
      @close="handleClose3"
    >
      <template #title>
        <span style="color: white">测量</span>
      </template>
      <template #default>
        <div class="el_measure">
          <div style="display: flex; margin-bottom: 6px">
            <div :class="classObject">
              <div
                @click.stop="distance(0)"
                class="m_box"
                style="margin-right: 40px"
              >
                <div class="m_box_a">
                  <img src="@/assets/images/亮色风格图集/测距离.png" alt="" />
                </div>
                <div>测距离</div>
              </div>
            </div>
            <div :class="classObject2">
              <div @click.stop="distance(1)" class="m_box">
                <div class="m_box_a">
                  <img src="@/assets/images/亮色风格图集/测面积.png" alt="" />
                </div>
                <div>测面积</div>
              </div>
            </div>
          </div>

          <!-- 提交数据 -->
          <div :class="classObject3">
            <el-form
              ref="measureForm"
              :model="MForm"
              label-width="65px"
              class="demo-ruleForm"
              :size="formSize"
              status-icon
            >
              <div class="measureForm">
                <el-form-item label="名称 :" prop="name">
                  <el-col :span="23"><el-input v-model="MForm.name" /></el-col>
                </el-form-item>
                <el-form-item label="备注 :" prop="remark">
                  <el-col :span="23">
                    <el-input v-model="MForm.remark" />
                  </el-col>
                </el-form-item>
              </div>

              <div class="measureForm_a">
                <el-form-item>
                  <el-button type="info" @click.stop="cancal()">
                    清空画布/并取消测量
                  </el-button>

                  <el-button type="primary" @click="submitMeasure()">
                    保存
                  </el-button>
                </el-form-item>
              </div>
            </el-form>
          </div>

          <!-- 展示测量表单 -->
          <el-table
            :header-cell-style="{
              background: '#f1eeff',
              'text-align': 'center',
            }"
            :cell-style="{ 'text-align': 'center' }"
            :data="tableMeasure"
            style="width: 100%"
            :row-style="{ height: 35 + 'px' }"
          >
            <el-table-column prop="formName" label="名称" />
            <el-table-column prop="result" label="数值" />
            <el-table-column prop="formMark" label="备注" />
            <el-table-column align="right" label="操作" width="150px">
              <template #default="scope">
                <el-button
                  size="small"
                  @click="handleFlyto(scope.$index, scope.row)"
                >
                  飞行
                </el-button>
                <el-button
                  type="danger"
                  size="small"
                  @click="delMeasure(scope.$index, scope.row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </vxe-modal>
  </div>
  <!-- 绘图(储存多要素) -->
  <div class="vxe_box vxe_box_b vxe_box_a">
    <vxe-modal
      :mask="false"
      :marginSize="-500"
      :lock-view="false"
      v-model="demo2.value2"
      width="490"
      height="350"
      :position="{ top: 50, left: 7 }"
      @close="handleClose"
    >
      <template #title>
        <span style="color: white">绘图</span>
      </template>
      <template #default>
        <!-- 图层展示板块 -->
        <div class="showLayer">
          <div v-for="(item, id) in drawArr" :key="id">
            <div :class="classObject4">
              <div
                @click="
                  itemChange(
                    $event,
                    item.id,
                    item.coordinates,
                    item.geometryType,
                    item.line,
                    item.point,
                    item.polygon
                  )
                "
                style="margin-right: 10px"
              >
                {{ item.layerName }}
              </div>
              <div class="layerItem_btn" @click="delDarwLayer(item.id)">×</div>
            </div>
          </div>
        </div>
        <!-- 提交用表单 -->
        <el-form
          ref="loginFormRefDraw"
          :model="formDraw"
          label-width="100px"
          :rules="rulesHT"
        >
          <el-form-item label="图层类型 :" prop="layerType">
            <el-radio-group v-model="formDraw.layerType">
              <el-radio label="1">个人</el-radio>
              <el-radio label="2">公共</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="图层名称 :" prop="layerName">
            <el-input v-model="formDraw.layerName" />
          </el-form-item>
          <el-form-item label="绘图类型 :" prop="resource">
            <el-radio-group
              v-model="formDraw.resource"
              @change="getTypeSelectedPlus"
            >
              <el-radio label="Point">点</el-radio>
              <el-radio label="LineString">线</el-radio>
              <el-radio label="Polygon">面</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="vxe_box_c">
            <!-- 选择点绘制的样式 -->
            <div v-show="pointStyle" class="pointStyle">
              <div
                style="
                  display: flex;
                  justify-content: space-around;
                  width: 500px;
                  margin-bottom: 20px;
                "
              >
                <div>
                  <span>圆点半径:</span>
                  <el-input-number
                    v-model="num"
                    :min="1"
                    :max="100"
                    @change="handleChange"
                  />
                </div>
                <div>
                  <span>填充颜色:</span>
                  <el-color-picker
                    v-model="colorFill"
                    show-alpha
                    @change="getFillColor"
                  />
                </div>
              </div>
              <div
                style="
                  display: flex;
                  justify-content: space-around;
                  width: 475px;
                  margin-bottom: 20px;
                "
              >
                <div>
                  <span>边框宽度:</span>
                  <el-input-number
                    v-model="num4"
                    :min="1"
                    :max="100"
                    @change="handleChange4"
                  />
                </div>
                <div>
                  <span>边框颜色:</span>
                  <el-color-picker
                    v-model="color"
                    show-alpha
                    @change="getColor"
                  />
                </div>
              </div>
            </div>
            <!-- 选择线绘制的样式 -->
            <div
              class="pointStyle"
              v-show="lineStyle"
              style="
                display: flex;
                justify-content: space-around;
                width: 400px;
                margin-bottom: 20px;
              "
            >
              <!-- <el-dropdown>
              <span class="el-dropdown-link">
                线条样式
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>实线</el-dropdown-item>
                  <el-dropdown-item>虚线</el-dropdown-item>
                  <el-dropdown-item>点</el-dropdown-item>
                  <el-dropdown-item>点划线</el-dropdown-item>
                  <el-dropdown-item>双点划线</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown> -->
              <div>
                <span>线条宽度:</span>
                <el-input-number
                  v-model="num2"
                  :min="1"
                  :max="100"
                  @change="handleChange"
                />
              </div>
              <div>
                <span>线条颜色:</span>
                <el-color-picker
                  v-model="color"
                  show-alpha
                  @change="getColor"
                />
              </div>
              <!-- <div>
              <span>箭头显示:</span>
              <el-dropdown>
                <span class="el-dropdown-link">
                  显示
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>显示</el-dropdown-item>
                    <el-dropdown-item>不显示</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div> -->
              <!-- <div>
              <span>显示测量:</span>
              <el-switch v-model="value1" />
            </div>  -->
            </div>
            <!-- 选择面绘制的样式 -->
            <div
              class="pointStyle"
              id="areaStyle"
              v-show="areaStyle"
              style="
                display: flex;
                justify-content: space-around;
                width: 383px;
                margin-bottom: 20px;
              "
            >
              <div>
                <span>边框颜色:</span>
                <el-color-picker
                  v-model="color"
                  show-alpha
                  @change="getColor"
                />
              </div>
              <div>
                <span>填充颜色:</span>
                <el-color-picker
                  v-model="num3"
                  show-alpha
                  @change="getFillColor"
                />
              </div>
              <div>
                <span>边框宽度:</span>
                <el-input-number
                  v-model="num2"
                  :min="1"
                  :max="100"
                  @change="handleChange"
                />
              </div>
              <!-- <div>
              <span>显示测量:</span>
              <el-switch v-model="value1" />
            </div>  -->
            </div>
          </div>
          <el-form-item style="margin-left: 125px">
            <el-button type="info" @click="resetLoginFormPlus">
              重置并清空画布
            </el-button>
            <el-button type="primary" @click="onSubmitPlus">提交绘制</el-button>
          </el-form-item>
        </el-form>
      </template>
    </vxe-modal>
  </div>
</template>

<script setup>
// 分割线
import { Map } from 'ol'
import View from 'ol/View.js'
import 'ol/ol.css'
import TileLayer from 'ol/layer/Tile'
import { XYZ } from 'ol/source'
import { get as getProjection } from 'ol/proj'
import { getWidth, getTopLeft } from 'ol/extent'
import VectorLayer from 'ol/layer/Vector.js'
import VectorSource from 'ol/source/Vector.js'
import { Stroke, Style, Circle, Fill } from 'ol/style'
import olstyleStroke from 'ol/style/Stroke'
import olStyle from 'ol/style/Style'
import olstyleFill from 'ol/style/Fill'
import { Draw, Modify, Snap } from 'ol/interaction.js'
import Text from 'ol/style/Text.js'
import Feature from 'ol/Feature.js'
import Point from 'ol/geom/Point.js'
import Overlay from 'ol/Overlay'
import LineString from 'ol/geom/LineString.js'
import Polygon from 'ol/geom/Polygon.js'
import { getArea, getLength } from 'ol/sphere'
import { unByKey } from 'ol/Observable'
import * as turf from '@turf/turf' //引入turf做buffer缓冲区分析
import { composeCssTransform } from 'ol/transform'
import { transform } from 'ol/proj'
import {
  onMounted,
  ref,
  toRaw,
  defineComponent,
  reactive,
  watch,
  nextTick,
} from 'vue'
import { VXETable } from 'vxe-table'
import $ from 'jquery'
import axios from 'axios'
//使用mitt进行任意组件通信
import emitter from '@/utils/bus'
// 测量组件
// import MeasureView from '../MeasureView.vue'
// 引入饿了么UI
import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'
//测试用菠萝存储地图容器
import {
  userMap,
  switchList,
  switchList2,
  switchList3,
  switchList4,
  switchList5,
  switchList12,
} from '@/store/index'
//提交意见管理接口
import {
  submitUserComments,
  submitUserMark,
  getUserMark,
  delUserMark,
  submitUserDraw,
  getUserDraw,
  delUserDraw,
} from '@/api/index.js'
// import { params } from '../../views/map/mapHooks/ArcGisMap'
let map = userMap() //接收
let list
let storeSwitch = switchList() //接受样式
let swithStatus
let storeSwitch2 = switchList2() //接受样式
let swithStatus2
let storeSwitch3 = switchList3() //接受样式
let swithStatus3
let storeSwitch4 = switchList4() //接受样式
let swithStatus4
let storeKJCX = switchList5()
let storeCYGN = switchList12()
// 意见管理
let drawLayer
let drawSource
let drawFeature
let draw
let snap
// 绘图
let drawLayerPlus
let drawSourcePlus
let drawFeaturePlus
let drawPlus
// 测量
let helpTooltipElement //帮助提示框元素
let feature
let helpTooltip
let drawUser
let measureTooltipElement //测量提示元素
let measureTooltip //测量值
let listener
let mapMouseMove
let mapMouseClick
let drawUserLayer
let drawUserSource
let drawUserFeature
const typeSelected = ref()
const typeSelectedPlus = ref()
// 控制测量子组件
// 控制选中信息高亮
const SQ_flag = ref(false)
const YJGL_flag = ref(false)
const CL_flag = ref(false)
const HT_flag = ref(false)
const KJ_flag = ref(false)
// 分割线
onMounted(() => {
  //localStorage.removeItem('submitForm') //手动清除测量表单
  list = toRaw(map.map)
  // console.log('地图容器', list)
  initDraw()
  initDrawPlus()
})
watch(storeCYGN, () => {
  if (toRaw(storeCYGN.queryBtn) == false) {
    demo2.value1 = false
    demo2.value2 = false
    demo2.value3 = false
    demo2.value4 = false
    handleClose4()
    handleClose3()
    handleClose2()
    handleClose()
    SQ_flag.value = false
    YJGL_flag.value = false
    CL_flag.value = false
    HT_flag.value = false
    storeCYGN.queryBtn = true
  }
})
const demo2 = reactive({
  // 意见管理
  value1: false,
  // 绘图
  value2: false,
  // 测量
  value3: false,
  // 书签
  value4: false,
})

// 意见管理1.1
const showOpinion = () => {
  swithStatus = toRaw(storeSwitch.detectSwitch)
  swithStatus2 = toRaw(storeSwitch2.repairSwitch)
  swithStatus3 = toRaw(storeSwitch3.operationSwitch)
  swithStatus4 = toRaw(storeSwitch4.projectSwitch)
  // console.log('swithStatus', swithStatus2)
  if (swithStatus == true) {
    storeSwitch.opinionBtn = true
    // console.log(toRaw(storeSwitch.opinionBtn))
  }
  if (swithStatus2 == true) {
    storeSwitch2.opinionBtn = true
    console.log('22222', storeSwitch2.opinionBtn)
  }
  if (swithStatus3 == true) {
    storeSwitch3.opinionBtn = true
  }
  if (swithStatus4 == true) {
    storeSwitch4.opinionBtn = true
  }
  demo2.value1 = true
  demo2.value2 = false
  demo2.value3 = false
  demo2.value4 = false
  SQ_flag.value = false
  YJGL_flag.value = !YJGL_flag.value
  // 打开常用功能关闭空间查询
  storeKJCX.queryBtn = false
  resetLoginFormPlus()
  cancal()
  if (YJGL_flag.value == false) {
    demo2.value1 = false
    resetLoginForm()
  }
  CL_flag.value = false
  HT_flag.value = false
  KJ_flag.value = false
}
const loginFormRef = ref(null)
const form = reactive({
  name: '', //反映人
  region: '', //反映类型
  level: '', //反映等级
  desc: '', //问题描述
  resource: '', //选择范围
})
// // 意见管理1.2重置表单
const resetLoginForm = () => {
  // console.log(loginFormRef.value)
  if (loginFormRef.value != null) {
    loginFormRef.value.resetFields()
  }
  drawSource.clear() //清空画布
  list.removeInteraction(draw) //清除交互
}
// // 意见管理1.3载入交互式图层//测量载入矢量图层
const initDraw = () => {
  // 意见
  drawSource = new VectorSource({
    wrapX: false,
  })
  drawLayer = new VectorLayer({
    source: drawSource,

    style: {
      'fill-color': '#365d8d80',
      'stroke-color': '#365d8d',
      'stroke-width': 3,
      'circle-radius': 7,
      'circle-fill-color': '#365d8d',
    },
    zIndex: 9999,
  })
  list.addLayer(drawLayer)
  // 测量
  backSource = new VectorSource()
  backLayer = new VectorLayer({
    source: backSource,
    style: {
      'fill-color': '#365d8d80',
      'stroke-color': '#365d8d',
      'stroke-width': 3,
      'circle-radius': 7,
      'circle-fill-color': '#365d8d',
    },
    zIndex: 9999,
  })
  list.addLayer(backLayer)
}
// // 意见管理1.4切换时
const getTypeSelected = (val) => {
  console.log('选中', val)
  typeSelected.value = val
  list.removeInteraction(draw)
  drawSource.clear()
  addInteraction()
}
// // 意见管理1.5添加交互
const addInteraction = () => {
  draw = new Draw({
    source: drawLayer.getSource(),
    type: typeSelected.value,
  })
  list.addInteraction(draw)
  snap = new Snap({ source: drawLayer.getSource() })
  list.addInteraction(snap)
}
// // 意见管理1.6提交表单
let trueCoordinates
let trueForm
const rulesYJ = reactive({
  name: [{ required: true, message: '请输入名字', trigger: 'blur' }],
  region: [{ required: true, message: '请输入反映类型', trigger: 'blur' }],
  level: [{ required: true, message: '请输入反映等级', trigger: 'blur' }],
  desc: [{ required: true, message: '请输入问题描述', trigger: 'blur' }],
  resource: [{ required: true, message: '请输入选择范围', trigger: 'blur' }],
})
const onSubmit = () => {
  loginFormRef.value.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      trueForm = toRaw(form)
      var features = drawLayer.getSource().getFeatures() //获取源数据中要素的集合
      const coordinates = features[0].getGeometry().getCoordinates()
      const type = features[0].getGeometry().getType()
      trueCoordinates = { type, coordinates }
      const wholeForm = { trueForm, trueCoordinates }

      //const list = []
      // trueCoordinates.coordinates.forEach((value) => {
      //   list.push([[X, Y]])
      // })
      if (type == 'Polygon') {
        const a3 = trueCoordinates.coordinates[0]
        console.log('多边形坐标', a3)
        const a4 = []
        for (let i = 0; i < a3.length; i++) {
          const obj = { x: a3[i][0], y: a3[i][1] }
          // const list = [obj]
          a4.push(obj)
          console.log('多边形对象', obj)
        }
        console.log('多边形数组', a4)
        const paramsMes = {
          feedbackType: form.region,
          problemLevel: form.level,
          problemDescription: form.desc,
          feedbackPerson: form.name,
          geometryType: type,
          feedbackTime: '2023-2-23',
          list: a4,
        }
        console.log('表单信息', paramsMes)
        submitUserComments(paramsMes).then((res) => {
          console.log(res)
        })
      } else {
        const a1 = [trueCoordinates.coordinates]
        console.log('坐标', a1)
        const a2 = []
        for (let i = 0; i < a1.length; i++) {
          const obj = { x: a1[i][0], y: a1[i][1] }
          // const list = [obj]
          a2.push(obj)
          console.log('对象', obj)
        }
        console.log('数组', a2)
        var currentTime =
          new Date().getFullYear() +
          '-' +
          new Date().getMonth() +
          '-' +
          new Date().getDate()
        // console.log('打印当前时间', currentTime)
        const paramsMes = {
          feedbackType: form.region,
          problemLevel: form.level,
          problemDescription: form.desc,
          feedbackPerson: form.name,
          geometryType: type,
          feedbackTime: currentTime,
          list: a2,
        }
        console.log('表单信息', paramsMes)
        submitUserComments(paramsMes).then((res) => {
          console.log(res)
        })
      }
      loginFormRef.value.resetFields() //清空表单
      drawSource.clear() //清空画布
      list.removeInteraction(draw) //清除交互
      ElMessage({
        message: '成功提交',
        type: 'success',
      })
    } else {
      ElMessage({
        message: '提交失败',
        type: 'error',
      })
    }
  })
}
// 绘图1.1弹出
const showDraw = () => {
  swithStatus = toRaw(storeSwitch.detectSwitch)
  swithStatus2 = toRaw(storeSwitch2.repairSwitch)
  swithStatus3 = toRaw(storeSwitch3.operationSwitch)
  swithStatus4 = toRaw(storeSwitch4.projectSwitch)
  if (swithStatus == true) {
    storeSwitch.opinionBtn = true
  }
  if (swithStatus2 == true) {
    storeSwitch2.opinionBtn = true
    console.log('22222', storeSwitch2.opinionBtn)
  }
  if (swithStatus3 == true) {
    storeSwitch3.opinionBtn = true
  }
  if (swithStatus4 == true) {
    storeSwitch4.opinionBtn = true
  }
  demo2.value2 = true
  demo2.value1 = false
  demo2.value3 = false
  demo2.value4 = false
  SQ_flag.value = false
  YJGL_flag.value = false
  CL_flag.value = false
  HT_flag.value = !HT_flag.value
  storeKJCX.queryBtn = false
  resetLoginForm()
  cancal()
  if (HT_flag.value == false) {
    demo2.value2 = false
    resetLoginFormPlus()
  }
  KJ_flag.value = false
  getDraw()
}
const drawArr = ref([])
// 获取图层清单
const getDraw = () => {
  getUserDraw().then((res) => {
    if (res.code == 200) {
      drawArr.value = res.data
    } else {
      console.log(res)
    }
  })
}
const loginFormRefDraw = ref(null)
const formDraw = reactive({
  layerName: '', //图层名
  layerType: '', //图层类型
  resource: '', //选择范围
})
const rulesHT = reactive({
  layerName: [{ required: true, message: '请输入图层名', trigger: 'blur' }],
  layerType: [{ required: true, message: '请选择图层类型', trigger: 'blur' }],
  resource: [{ required: true, message: '请输入绘图类型', trigger: 'blur' }],
})
// 绘图1.2重置
const resetLoginFormPlus = () => {
  if (loginFormRefDraw.value != null) {
    loginFormRefDraw.value.resetFields()
  }
  drawSourcePlus.clear() //清空画布
  list.removeInteraction(drawPlus) //清除交互
}
// 绘图1.3载入图层
const initDrawPlus = () => {
  drawSourcePlus = new VectorSource({
    wrapX: false,
  })
  drawLayerPlus = new VectorLayer({
    source: drawSourcePlus,
    style: {
      'fill-color': 'rgba(255, 255, 255, 0.2)', //面填充颜色
      'stroke-color': 'rgba(255,204,51, 0.8)', //线条和多边形边框颜色
      'stroke-width': 2, //线条和多边形边框宽度
      'circle-radius': 7, //点大小
      'circle-fill-color': 'rgba(255,204,51, 0.8)', //点填充颜色
      'circle-stroke-color': 'rgba(255,204,51, 0.8)', //点边框颜色
      'circle-stroke-width': 1, //点边框宽度
    },
    zIndex: 9999,
  })
  list.addLayer(drawLayerPlus)
}
// 绘图1.4切换载入交互
const pointStyle = ref(false)
const lineStyle = ref(false)
const areaStyle = ref(false)
const value = ref(0) //线透明度滑块默认值
const marks = reactive({
  0: {
    label: '0%',
  },
  50: {
    // style: {
    //   color: '#1989FA',
    // },
    label: '50%',
  },
  100: {
    label: '100%',
  },
})
const value1 = ref(false) //线要素测量开关
const valueArea = ref(0) //面透明度滑块默认值
const marksArea = reactive({
  0: {
    label: '0%',
  },
  50: {
    label: '50%',
  },
  100: {
    label: '100%',
  },
})
const getTypeSelectedPlus = (val) => {
  console.log('选中', val)
  if (val == 'Point') {
    pointStyle.value = true
    lineStyle.value = false
    areaStyle.value = false
  } else if (val == 'LineString') {
    lineStyle.value = true
    pointStyle.value = false
    areaStyle.value = false
  } else {
    areaStyle.value = true
    pointStyle.value = false
    lineStyle.value = false
  }
  typeSelectedPlus.value = val
  list.removeInteraction(drawPlus)
  drawSourcePlus.clear()
  addInteractionPlus()
}
// 绘图1.5交互
const addInteractionPlus = () => {
  drawPlus = new Draw({
    source: drawLayerPlus.getSource(),
    type: typeSelectedPlus.value,
  })
  list.addInteraction(drawPlus)
}
// 绘图1.6=>点线面样式
// 点大小与比边框选择器
const num = ref(7)
const num4 = ref(1)
const handleChange = (value) => {
  num.value = value
  num2.value = value
  getColor(color.value)
}
const handleChange4 = (value) => {
  num4.value = value
  getColor(color.value)
}
// 线宽度选择器
const num2 = ref(2)
// 面填充默认颜色
const num3 = ref('rgba(255, 255, 255, 0.2)')
// 颜色选择器
const color = ref('rgba(255,204,51, 0.8)')
const colorFill = ref('rgba(255,204,51, 0.8)')
const getColor = (val) => {
  color.value = val
  console.log('选择点填充颜色', color.value)
  const featuresPlus = drawLayerPlus.getSource().getFeatures() //获取源数据中要素的集合
  const typePlus = featuresPlus[0].getGeometry().getType()
  if (typePlus == 'Point') {
    for (let i = 0; i < featuresPlus.length; i++) {
      const obj = featuresPlus[i]
      obj.setStyle(
        new Style({
          image: new Circle({
            radius: `${num.value}`,
            fill: new Fill({
              color: `${colorFill.value}`,
            }),
            stroke: new Stroke({
              color: `${color.value}`,
              width: `${num4.value}`,
            }),
          }),
        })
      )
    }
  } else if (typePlus == 'LineString') {
    for (let i = 0; i < featuresPlus.length; i++) {
      const obj = featuresPlus[i]
      obj.setStyle(
        new Style({
          stroke: new Stroke({
            color: `${color.value}`,
            width: `${num2.value}`,
          }),
        })
      )
    }
  } else {
    for (let i = 0; i < featuresPlus.length; i++) {
      const obj = featuresPlus[i]
      obj.setStyle(
        new Style({
          fill: new Fill({
            color: `${num3.value}`,
          }),
          stroke: new Stroke({
            color: `${color.value}`,
            width: `${num2.value}`,
          }),
        })
      )
    }
  }
}
const getFillColor = (val) => {
  colorFill.value = val
  getColor(color.value)
}
// 绘图1.7提交表单
let trueCoordinatesPlus
let trueFormPlus
let paramsDraw
let arrDraw
let a5
const onSubmitPlus = () => {
  loginFormRefDraw.value.validate((valid, fields) => {
    if (valid) {
      console.log(formDraw)
      trueFormPlus = toRaw(formDraw)
      const featuresPlus = drawLayerPlus.getSource().getFeatures() //获取源数据中要素的集合
      // console.log('要素', featuresPlus)
      a5 = []
      for (let i = 0; i < featuresPlus.length; i++) {
        const obj = featuresPlus[i]
        const coordinatesPlus = featuresPlus[i].getGeometry().getCoordinates()
        a5.push(coordinatesPlus)
      }
      // console.log('要素数组', a5)
      arrDraw = []
      const typePlus = featuresPlus[0].getGeometry().getType()
      const userName = localStorage.getItem('username')
      if (typePlus == 'Point') {
        for (let i = 0; i < a5.length; i++) {
          const obj = { x: a5[i][0], y: a5[i][1] }
          arrDraw.push(obj)
          // console.log('对象', obj)
        }
        // console.log('数组', arrDraw)
        paramsDraw = {
          userName: userName,
          layerName: formDraw.layerName,
          layerType: formDraw.layerType,
          geometryType: typePlus,
          point: {
            symbolShape: '0', //符号形状
            symbolSize: num.value, //符号大小
            symbolColor: colorFill.value, //符号颜色
            transparency: '1', //透明度
            strokeColor: color.value, //轮廓颜色
            strokeWidth: num4.value, //轮廓宽度
          },
          coordinates: arrDraw,
        }
        // console.log('点传参', paramsDraw)
      } else if (typePlus == 'LineString') {
        const a6 = a5[0]
        for (let i = 0; i < a6.length; i++) {
          const obj = { x: a6[i][0], y: a6[i][1] }
          arrDraw.push(obj)
        }
        console.log('数组', arrDraw)
        paramsDraw = {
          userName: userName,
          layerName: formDraw.layerName,
          layerType: formDraw.layerType,
          geometryType: 'Line',
          line: {
            lineColor: color.value, //线条颜色
            lineStyle: '0', //线条样式
            transparency: '1', //透明度
            lineWidth: num2.value, //线条宽度
            displayArrow: '0', //显示箭头:0不显示,1显示
            arrowDirection: '  ', //箭头方向:1正向,-1逆向
          },
          coordinates: arrDraw,
        }
        // console.log('线传参', paramsDraw)
      } else {
        const a6 = a5[0][0]
        for (let i = 0; i < a6.length; i++) {
          const obj = { x: a6[i][0], y: a6[i][1] }
          arrDraw.push(obj)
        }
        console.log('数组', arrDraw)
        paramsDraw = {
          userName: userName,
          layerName: formDraw.layerName,
          layerType: formDraw.layerType,
          geometryType: typePlus,
          polygon: {
            solidColor: num3.value,
            transparency: '1',
            strokeColor: color.value,
            strokeWidth: num2.value,
          },
          coordinates: arrDraw,
        }
        // console.log('多边形传参', paramsDraw)
      }
      console.log('绘图表单', paramsDraw)
      submitUserDraw(paramsDraw).then((res) => {
        console.log(res)
        getDraw() //重新获取表单
      })
      ElMessage({
        message: '成功提交',
        type: 'success',
      })
      loginFormRefDraw.value.resetFields()
      drawSourcePlus.clear() //清空画布
      list.removeInteraction(drawPlus) //清除交互
    } else {
      ElMessage.error('请将表单填写完整')
    }
  })
}
// 绘图1.8获取图层
let raw
let co
let drawFeaturePlusL
let drawFeaturePlusPoly
const classObject4 = ref({
  layerItem: true,
  layerItem_focus: false,
})
const itemChange = (
  $event,
  id,
  coordinates,
  geometryType,
  line,
  point,
  polygon
) => {
  // classObject4.value = {
  //   layerItem: false,
  //   layerItem_focus: true,
  // }
  console.log(
    'item',
    id,
    toRaw(coordinates),
    geometryType,
    toRaw(line),
    toRaw(point),
    toRaw(polygon)
  )
  co = toRaw(coordinates)
  // 判断不同类型
  const type = geometryType
  if (type == 'Point') {
    const ptStyle = toRaw(point)
    for (let i = 0; i < co.length; i++) {
      drawFeaturePlus = new Feature({
        geometry: new Point([co[i].x, co[i].y]),
      })
      drawFeaturePlus.setStyle(
        new Style({
          image: new Circle({
            radius: `${ptStyle.symbolSize}`,
            fill: new Fill({
              color: `${ptStyle.symbolColor}`,
            }),
            stroke: new Stroke({
              color: `${ptStyle.strokeColor}`,
              width: `${ptStyle.strokeWidth}`,
            }),
          }),
        })
      )
      drawSourcePlus.addFeature(drawFeaturePlus)
    }
  } else if (type == 'Line') {
    const lnStyle = toRaw(line)
    for (let i = 0; i < co.length - 1; i++) {
      drawFeaturePlusL = new Feature({
        geometry: new LineString([
          [co[i].x, co[i].y],
          [co[i + 1].x, co[i + 1].y],
        ]),
      })
      drawFeaturePlusL.setStyle(
        new Style({
          stroke: new Stroke({
            color: `${lnStyle.lineColor}`,
            width: `${lnStyle.lineWidth}`,
          }),
        })
      )
      drawSourcePlus.addFeature(drawFeaturePlusL)
    }
  } else {
    const plStyle = toRaw(polygon)
    const arr = []
    for (let i = 0; i < co.length; i++) {
      const a = [co[i].x, co[i].y]
      arr.push(a)
    }
    console.log('多边形数组', arr)
    drawFeaturePlusPoly = new Feature({
      geometry: new Polygon([arr]),
    })
    drawFeaturePlusPoly.setStyle(
      new Style({
        fill: new Fill({
          color: `${plStyle.solidColor}`,
        }),
        stroke: new Stroke({
          color: `${plStyle.strokeColor}`,
          width: `${plStyle.strokeWidth}`,
        }),
      })
    )
    drawSourcePlus.addFeature(drawFeaturePlusPoly)
  }
  const Flyto = [toRaw(coordinates)[0].x, toRaw(coordinates)[0].y]
  // console.log('飞行坐标', Flyto)
  list.getView().setZoom(1)
  list.getView().setCenter(Flyto)
}
// 绘图1.9删除图层
const delDarwLayer = (id) => {
  drawSourcePlus.clear()
  console.log('000')
  const params = {
    id: id,
  }
  delUserDraw(params).then((res) => {
    console.log('提交', res)
    getDraw()
  })
}
// 测量列表渲染
// 展示测量表单
const tableMeasure = ref()
const getMForm = () => {
  if (localStorage.getItem('submitForm')) {
    const str = localStorage.getItem('submitForm')
    const arr = JSON.parse(str)
    console.log('储存测量', arr)
    tableMeasure.value = arr
  } else {
    console.log('暂无数据')
  }
}
const showMeasurement = () => {
  swithStatus = toRaw(storeSwitch.detectSwitch)
  swithStatus2 = toRaw(storeSwitch2.repairSwitch)
  swithStatus3 = toRaw(storeSwitch3.operationSwitch)
  swithStatus4 = toRaw(storeSwitch4.projectSwitch)
  // console.log('swithStatus', swithStatus2)
  if (swithStatus == true) {
    storeSwitch.opinionBtn = true
    // console.log(toRaw(storeSwitch.opinionBtn))
  }
  if (swithStatus2 == true) {
    storeSwitch2.opinionBtn = true
    // console.log('22222', storeSwitch2.opinionBtn)
  }
  if (swithStatus3 == true) {
    storeSwitch3.opinionBtn = true
  }
  if (swithStatus4 == true) {
    storeSwitch4.opinionBtn = true
  }
  getMForm()
  demo2.value3 = true
  demo2.value2 = false
  demo2.value1 = false
  demo2.value4 = false
  SQ_flag.value = false
  YJGL_flag.value = false
  CL_flag.value = !CL_flag.value
  storeKJCX.queryBtn = false
  // 关闭意见管理和绘图的交互
  resetLoginForm()
  resetLoginFormPlus()
  if (CL_flag.value == false) {
    demo2.value3 = false
    cancal()
  }
  HT_flag.value = false
  KJ_flag.value = false
}
const drawLayers = ref([])
const drawElements = ref([])
const measureForm = ref(null)
const MForm = reactive({
  name: '',
  remark: '',
})
// 测量功能
const result = ref(null)
const classObject = ref({
  map_box: false,
  map_box_focus: true,
})
const classObject2 = ref({
  map_box: true,
  map_box_focus: false,
})
const classObject3 = ref({
  measureForm_box: true,
  measureForm_box_change: false,
})
const distance = (num) => {
  if (num == 0) {
    // 距离
    classObject.value = {
      map_box: false,
      map_box_focus: true,
    }
    // 面积
    classObject2.value = {
      map_box: true,
      map_box_focus: false,
    }
    // 外框
    classObject3.value = {
      measureForm_box: true,
      measureForm_box_change: false,
    }
  } else {
    // 距离
    classObject.value = {
      map_box: true,
      map_box_focus: false,
    }
    // 面积
    classObject2.value = {
      map_box: false,
      map_box_focus: true,
    }
    // 外框
    classObject3.value = {
      measureForm_box: false,
      measureForm_box_change: true,
    }
  }
  if (drawLayers.value.length != 0) {
    //如果有图层先清空,一次只存一种
    cancal()
  }
  // 创建一个空数据源
  drawUserSource = new VectorSource({
    wrapX: false,
  })
  // 创建一个矢量图层
  drawUserLayer = new VectorLayer({
    source: drawUserSource,
    zIndex: 9999,
    style: new olStyle({
      fill: new olstyleFill({
        color: '#365d8d80',
      }),
      stroke: new olstyleStroke({
        color: '#365d8d',
        width: 3,
      }),
      image: new Circle({
        radius: 6,
        fill: new olstyleFill({
          color: '#365d8d',
        }),
      }),
    }),
  })
  // 侦听地图的鼠标移动事件
  mapMouseMove = list.on('pointermove', (ev) => {
    let helpMsg = '点击开始测量'
    if (feature) {
      helpMsg = '双击结束测量'
    }
    // todo- helpTooltipElement/helpTooltip 待创建
    helpTooltipElement.innerHTML = helpMsg
    helpTooltip.setPosition(ev.coordinate)
    helpTooltipElement.classList.remove('hidden')
  })

  // 当移出地图范围的时候让测量工具提示框隐藏
  list.getViewport().addEventListener('mouseout', function () {
    helpTooltipElement.classList.add('hidden')
  })

  // 根据传入的参数判断画笔的绘图类型
  var type = num == 0 ? 'LineString' : 'Polygon'

  // 创建一个画笔
  drawUser = new Draw({
    zIndex: 9999,
    source: drawUserSource,
    type: type,
    style: new olStyle({
      fill: new olstyleFill({
        color: 'rgba(255, 255, 255, 0.2)', //[[a,b],[c,d],[e,f],[a,b]]
      }),
      stroke: new olstyleStroke({
        color: 'rgba(0, 0, 0, 0.5)',
        lineDash: [10, 10],
        width: 4,
      }),
      image: new Circle({
        radius: 5,
        stroke: new olstyleStroke({
          color: 'rgba(0, 0, 0, 0.7)',
        }),
        fill: new olstyleFill({
          color: 'rgba(255, 255, 255, 0.2)',
        }),
      }),
    }),
  })
  // 开始点击绘制
  drawUser.on('drawstart', (evt) => {
    // document
    //   .querySelector('.ol-overlay-container')
    //   .removeChild(document.querySelector('.ol-overlay-container>div'))
    // drawUserSource.clear()
    // 进行本次
    feature = evt.feature
    let tooltipCoord = evt.coordinate
    listener = feature.getGeometry().on('change', function (evt) {
      const geom = evt.target
      let output
      if (geom instanceof Polygon) {
        output = formatArea(geom)
      } else if (geom instanceof LineString) {
        output = formatLength(geom)
      }
      tooltipCoord = geom.getLastCoordinate()
      measureTooltipElement.innerHTML = output
      result.value = output
      measureTooltip.setPosition(tooltipCoord)
    })
  })
  // 双击绘制完成
  drawUser.on('drawend', () => {
    measureTooltipElement.className = 'ol-tooltip ol-tooltip-static'
    measureTooltip.setOffset([0, -7])
    feature = null
    measureTooltipElement = null
    createMeasureTooltip()
    unByKey(listener)
    list.removeInteraction(drawUser)
    helpTooltipElement.innerHTML = ''
  })
  // 格式化长度--管网粘贴
  const formatLength = function (line) {
    var sourceProj = list.getView().getProjection() //获取投影坐标系
    var geom = line.clone().transform(sourceProj, 'EPSG:3857') //如果不是3857坐标系，需要转换到3857测距
    const length = getLength(geom)
    let output
    if (length > 100) {
      output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km'
    } else {
      output = Math.round(length * 100) / 100 + ' ' + 'm'
    }
    return output
  }
  // 格式化面积
  const formatArea = function (polygon) {
    var sourceProj = list.getView().getProjection() //获取投影坐标系
    var geom = polygon.clone().transform(sourceProj, 'EPSG:3857')
    var area = getArea(geom)
    var output
    if (area > 10000) {
      output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km²'
    } else {
      output = Math.round(area * 100) / 100 + ' ' + 'km'
    }
    return output
  }
  createHelpTooltip()
  createMeasureTooltip()
  list.addLayer(drawUserLayer)
  drawLayers.value.push(drawUserLayer)
  list.addInteraction(drawUser)
}
//创建测量结果的提示信息
const createMeasureTooltip = () => {
  if (measureTooltipElement) {
    measureTooltipElement.parentNode.removeChild(measureTooltipElement)
  }
  measureTooltipElement = document.createElement('div')
  measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure'
  // console.log('测量结果', measureTooltipElement)
  measureTooltip = new Overlay({
    zIndex: 9999,
    element: measureTooltipElement,
    offset: [0, -15],
    positioning: 'bottom-center',
    stopEvent: false,
    insertFirst: false,
  })
  drawElements.value.push(measureTooltip)
  list.addOverlay(measureTooltip)
}
const createHelpTooltip = () => {
  if (helpTooltipElement) {
    helpTooltipElement.parentNode.removeChild(helpTooltipElement)
  }
  helpTooltipElement = document.createElement('div')
  helpTooltipElement.className = 'ol-tooltip hidden'
  helpTooltip = new Overlay({
    zIndex: 9999,
    element: helpTooltipElement,
    offset: [15, 0],
    positioning: 'center-left',
  })
  list.addOverlay(helpTooltip)
}
// 取消测距or面积并清空画布
const cancal = () => {
  if (drawLayers.value.length >= 1) {
    for (let i = 0; i < drawLayers.value.length; i++) {
      drawLayers.value[i].getSource().clear() //删除VectorLayer需要先删除图层上所有的要素--遍历所有要素再删除
      list.removeLayer(drawLayers.value[i])
    }
    list.removeOverlay(helpTooltip)
    drawLayers.value = []
    drawElements.value = []
    list.removeInteraction(drawUser)
    unByKey(mapMouseMove)
    helpTooltipElement.innerHTML = ''
    // console.log('444')
    backSource.clear()
  } else {
    if (measureTooltipElement2 != undefined) {
      if (measureTooltipElement2.innerHTML != undefined) {
        measureTooltipElement2.innerHTML = ''
      }
    }
    backSource.clear()
    console.log('666')
  }
}
// 将测量结果保存到前端
let measurementForm
let submitForm
function submitMeasure() {
  if (drawLayers.value.length != 0) {
    const features = []
    const layers = toRaw(drawLayers.value)
    for (let i = 0; i < layers.length; i++) {
      features.push(layers[i].getSource().getFeatures())
    }
    // console.log('测量要素', features)
    const a6 = []
    for (let i = 0; i < features.length; i++) {
      const obj = features[i][0]
      const coordinatesPlus = features[i][0].getGeometry().getCoordinates()
      a6.push(coordinatesPlus)
    }
    // console.log('测量数组', a6)
    const type = features[0][0].getGeometry().getType()
    // console.log('测量类型', type)
    measurementForm = toRaw(MForm)
    // console.log(measurementForm)
    console.log('测量结果', toRaw(result.value))
    let a7 = []
    if (type == 'Polygon') {
      a7 = a6[0][0]
    } else {
      a7 = a6[0]
    }
    if (localStorage.getItem('submitForm')) {
      const str = localStorage.getItem('submitForm')
      const arr = JSON.parse(str)
      submitForm = {
        id: arr.length + 1,
        type: type,
        coordinates: a7,
        formName: measurementForm.name,
        formMark: measurementForm.remark,
        result: toRaw(result.value),
      }
      console.log('测量表单', submitForm)
    } else {
      submitForm = {
        id: 1,
        type: type,
        coordinates: a7,
        formName: measurementForm.name,
        formMark: measurementForm.remark,
        result: toRaw(result.value),
      }
    }
    var drophistory = JSON.parse(localStorage.getItem('submitForm')) || []
    drophistory.push(submitForm)
    localStorage.setItem('submitForm', JSON.stringify(drophistory))
    getMForm() //重新渲染表格
    ElMessage({
      message: '成功提交',
      type: 'success',
    })
    measureForm.value.resetFields() //清空表单
    cancal() //清空测量
  } else {
    ElMessage({
      message: '请先绘制',
      type: 'error',
    })
  }
}

// 飞行到测量位置
let backSource
let backLayer
let backLine
let backPoly
let measureTooltipElement2
const handleFlyto = (index, row) => {
  const rowData = toRaw(row)
  console.log('飞行数值', rowData)
  // 创建文字标注
  if (measureTooltipElement2) {
    measureTooltipElement2.parentNode.removeChild(measureTooltipElement2)
  }
  measureTooltipElement2 = document.createElement('div')
  measureTooltipElement2.className = 'ol-tooltip ol-tooltip-measure'
  measureTooltipElement2.innerHTML = rowData.result
  console.log(measureTooltipElement2)
  measureTooltip = new Overlay({
    zIndex: 9999,
    element: measureTooltipElement2,
    offset: [0, -15],
    positioning: 'bottom-center',
    stopEvent: false,
    insertFirst: false,
  })
  drawElements.value.push(measureTooltip)
  list.addOverlay(measureTooltip)
  measureTooltip.setPosition(rowData.coordinates[1])
  // 清空上一次要素
  backSource.clear()
  if (rowData.type == 'LineString') {
    // console.log('线飞行', rowData.coordinates[0], rowData.coordinates[1])
    const length = rowData.coordinates.length - 1
    for (let i = 0; i < length; i++) {
      backLine = new Feature({
        geometry: new LineString([
          rowData.coordinates[i],
          rowData.coordinates[i + 1],
        ]),
      })
      backSource.addFeature(backLine)
    }
  } else {
    const polyArr = [rowData.coordinates][0]
    // console.log('面测量', polyArr)
    backPoly = new Feature({
      geometry: new Polygon([polyArr]),
    })
    backSource.addFeature(backPoly)
  }
  list.getView().setZoom(0)
  list.getView().setCenter(rowData.coordinates[0])
}
// 将保存到前端的测量结果删除
const delMeasure = (row) => {
  // console.log(index, row)
  const rowData = toRaw(row)
  // console.log('选中', rowData + 1)
  const num = rowData + 1
  const str = localStorage.getItem('submitForm')
  const arr = JSON.parse(str)
  // console.log('原数组', arr)
  let index = arr.findIndex((ele) => {
    return ele.id === num
  })
  // console.log(index)
  arr.splice(index, 1)
  // console.log('新数组', arr)
  localStorage.setItem('submitForm', JSON.stringify(arr))

  getMForm() //重新渲染表格

  ElMessage({
    message: '删除成功',
    type: 'success',
  })
}
// 书签
const flag = ref(false)
const arrData = ref([])
const mark_flag = ref(false)
const getMark = () => {
  getUserMark().then((res) => {
    console.log('获取', res)

    arrData.value = res.data
  })
}
const showMark = () => {
  swithStatus = toRaw(storeSwitch.detectSwitch)
  swithStatus2 = toRaw(storeSwitch2.repairSwitch)
  swithStatus3 = toRaw(storeSwitch3.operationSwitch)
  swithStatus4 = toRaw(storeSwitch4.projectSwitch)
  // console.log('swithStatus', swithStatus2)
  if (swithStatus == true) {
    storeSwitch.opinionBtn = true
    // console.log(toRaw(storeSwitch.opinionBtn))
  }
  if (swithStatus2 == true) {
    storeSwitch2.opinionBtn = true
    console.log('22222', storeSwitch2.opinionBtn)
  }
  if (swithStatus3 == true) {
    storeSwitch3.opinionBtn = true
  }
  if (swithStatus4 == true) {
    storeSwitch4.opinionBtn = true
  }
  getMark()
  demo2.value4 = true
  demo2.value2 = false
  demo2.value3 = false
  demo2.value1 = false
  SQ_flag.value = !SQ_flag.value
  storeKJCX.queryBtn = false
  // 清除意见管理,测量,绘图交互
  resetLoginForm()
  resetLoginFormPlus()
  cancal()
  if (SQ_flag.value == false) {
    demo2.value4 = false
  }
  YJGL_flag.value = false
  CL_flag.value = false
  HT_flag.value = false
  KJ_flag.value = false
}
const formSize = ref('default')
const ruleFormRef = ref(null)
const ruleForm = reactive({
  name: '', //书签名称
})
const rules = reactive({
  name: [{ required: true, message: '书签名称无效', trigger: 'blur' }],
})
const resX = ref()
const setZoomCenter = () => {
  // console.log('当前缩放层级', list.getView().getZoom())
  // console.log('当前中心点', list.getView().getCenter())
  if (!ruleFormRef.value) return
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      const center = list.getView().getCenter()
      const userName = localStorage.getItem('username')
      const ruleformSubmit = {
        scaleLevel: list.getView().getZoom(),
        centerX: center[0],
        centerY: center[1],
        bookmarkName: ruleForm.name,
        // userName: '中国建筑第七工程局有限公司',
        userName: userName,
      }
      console.log('书签传参', ruleformSubmit)
      submitUserMark(ruleformSubmit).then((res) => {
        console.log('提交', res)
        getMark()
      })
      ElMessage({
        message: '成功提交',
        type: 'success',
      })
    } else {
      ElMessage.error('请填写书签名称')
    }
  })
}
// 点击标签跳转视角
const markID = ref()
function getRowId(id, centerX, centerY, scaleLevel) {
  $('#box_mark #item').click(function () {
    $(this).css('color', '#2aa3ff')
    $(this).siblings().css('color', '#838383')
  })
  // console.log('当前元素', e.target)

  const markCenter = [centerX, centerY]
  const markLevel = scaleLevel
  markID.value = id
  list.getView().setZoom(markLevel)
  list.getView().setCenter(markCenter)
}
// 删除书签
const removeZoomCenter = () => {
  console.log('当前被点击删除', markID.value)
  const params = {
    id: markID.value,
  }
  delUserMark(params).then((res) => {
    console.log('删除书签', res)
    getMark()
  })
}
/* 关闭时清除所有 */
// 绘图
const handleClose = () => {
  resetLoginFormPlus()
  HT_flag.value = false
}
// 意见管理
const handleClose2 = () => {
  resetLoginForm()
  YJGL_flag.value = false
}
// 测量
const handleClose3 = () => {
  cancal()
  CL_flag.value = false
}
const handleClose4 = () => {
  SQ_flag.value = false
}
</script>

<style lang="less" scoped>
.option {
  width: 245px;
  position: absolute;
  bottom: -35px;
  right: -35px;
}
.map_list {
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  text-align: center;
  width: 280px;
  .img_map_box {
    height: 56px;
    width: 60px;
    border: 1px solid #80eeff;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    .map_active {
      position: absolute;
      top: 39px;
      width: 58.4px;
      height: 16px;
      background-color: rgb(7, 247, 93);
      opacity: 0.85;
    }
    img {
      vertical-align: baseline;
    }
  }
  .img_map_box > img {
    width: 100%;
    height: 100%;
  }
}
.map_list > div {
  margin-top: 7px;
}
.list_title {
  height: 25px;
  border-bottom: 2px solid #72ed5c;
  font-weight: 600;
  font-size: 15px;
  color: #80eeff;
}
.el_btn {
  :deep(.el-form-item__label) {
    width: 75px;
    justify-content: space-around;
    color: #1a9cff;
    font-weight: 600;
    font-size: 15px;
  }
  :deep(.el-input__wrapper) {
    padding: 1px 37px;
  }
  :deep(.el-input__inner) {
    padding: 0 0 2px 0;
  }
}
.el_opinion {
  :deep(.el-form-item__label) {
    width: 75px;
    // justify-content: space-around;
    color: #6c6c6c;
    font-weight: 500;
    font-size: 13px;
  }
  :deep(.el-input) {
    width: 95%;
  }
  :deep(.el-input__wrapper) {
    padding: 1px 10px 0 37px;
    box-shadow: none;
    background: #f7f9fa;
  }
  :deep(.el-textarea) {
    width: 95%;
  }
  :deep(.el-textarea__inner) {
    box-shadow: none;
    background: #f7f9fa;
  }
  :deep(.el-button--info) {
    --el-button-bg-color: #bfbfbf;
    --el-button-border-color: #bfbfbf;
  }
  :deep(.el-form-item) {
    margin-bottom: 15px;
  }
}
.el_measure {
  :deep(.el-button--info) {
    --el-button-bg-color: #bfbfbf;
    --el-button-border-color: #bfbfbf;
  }
  :deep(.el-input__wrapper) {
    padding: 1px 10px 0 37px;
    box-shadow: none;
    background: #f7f9fa;
  }
  // 清除表格默认
  :deep(.el-table th) {
    padding: 0;
  }
  :deep(.el-table td) {
    padding: 0;
  }
  // 修改表头颜色
  :deep(.el-table__header-wrapper thead th div) {
    font-size: 13px;
    color: #7c7a83;
    height: 30px;
    line-height: 30px;
  }
}
// 弹窗头
.vxe_box {
  :deep(.vxe-modal--wrapper .vxe-modal--header) {
    background: url(../.././assets/images/k_db.png) 0px 0px / 100% 100%
      no-repeat !important;
  }
  :deep(.vxe-modal--wrapper .vxe-modal--header-title) {
    font-size: 18px;
    font-weight: 600;
    padding: 0 0 0.6em 1em;
    height: 40px;
    line-height: 40px;
  }
  :deep(.vxe-modal--wrapper .vxe-modal--close-btn) {
    color: #fff;
    transform: translateY(50%);
    text-shadow: 0px 2px 2px #00000071; //给文字加阴影
  }
}
.save {
  position: absolute;
  // background: #3d7fff;
  height: 35px;
  width: 200px;
  bottom: 6px;
  right: 0px;
  :deep(.el-button--info) {
    --el-button-bg-color: #bfbfbf;
    --el-button-border-color: #bfbfbf;
  }
}
// 书签图片
.box_mark {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  height: 175px;
  width: 480px;
  flex-wrap: wrap;
  text-align: center;
  font-size: 20px;
  position: relative;
  margin-left: 5px;
}
.box_mark > div:not(:nth-child(4n)) {
  margin-right: 25px;
}
.el-image__inner {
  height: 150px;
  width: 150px;
  cursor: pointer;
}
// 意见管理
.suffix {
  width: 12px;
  height: 12px;
  position: absolute;
  left: 10px;
  top: -3px;
}
#item {
  height: 57px;
  width: 100px;
  color: #838383;
  font-size: 13px;
  font-weight: 600;
}
#item img {
  width: 100px;
  height: 100%;
}
// 测量表单样式
.vxe_box_a {
  :deep(.vxe-modal--wrapper .vxe-modal--content) {
    padding: 0.8em 2.5em;
  }
  :deep(.vxe-modal--content) {
    scrollbar-color: #d8d8d8 #e9e9e9; /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
    scrollbar-width: thin; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
    -ms-overflow-style: none; /* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
  }
  /* 以下是chrome浏览器自定义滚动条样式方式 */
  :deep(.vxe-modal--content::-webkit-scrollbar) {
    width: 5px;
    height: 4px; // 纵向滚动条 必写
    border: 1px solid #e9e9e9;
  }
  :deep(.vxe-modal--content::-webkit-scrollbar-thumb) {
    background-color: #d8d8d8;
    // border: 1px dashed #888888;
    width: 4px;
    height: 150px;
  }
}
.m_box {
  width: 38px;
  font-size: 11px;
  text-align: center;
  cursor: pointer;
}
.m_box_a {
  width: 38px;
  height: 38px;
  // border: 1px dashed #8b8b8b;
}
.m_box_a img {
  width: 100%;
}
.map_box {
  color: #989898;
}
.map_box:hover {
  color: #1799fa;
}
.map_box_focus {
  color: #1799fa;
}
.map_box_focus:hover {
  color: #1799fa;
}
.measureForm_box {
  border: 2px solid #5bb8ff;
  border-radius: 5px;
  position: relative;
  height: 155px;
  margin-bottom: 17px;
  padding: 10px 3px 20px 3px;
  :deep(.el-form-item--default) {
    margin-bottom: 16px;
  }
}
.measureForm_box:after {
  content: '';
  position: absolute;
  left: 11px;
  // left: 89px;
  top: -6.5px;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  transform: rotate(45deg);
  background: #ffffff;
  border: 2px solid #5bb8ff;
  border-right-color: transparent;
  // border-left-color: transparent;
  border-bottom-color: transparent;
}
.measureForm_box_change {
  border: 2px solid #5bb8ff;
  border-radius: 5px;
  position: relative;
  height: 155px;
  margin-bottom: 17px;
  padding: 10px 3px 20px 3px;
  :deep(.el-form-item--default) {
    margin-bottom: 16px;
  }
}
.measureForm_box_change:after {
  content: '';
  position: absolute;
  left: 89px;
  // left: 89px;
  top: -6.5px;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  transform: rotate(45deg);
  background: #ffffff;
  border: 2px solid #5bb8ff;
  border-right-color: transparent;
  // border-left-color: transparent;
  border-bottom-color: transparent;
}
.measureForm_a {
  position: absolute;
  right: 15px;
}
// 绘图表单样式
.vxe_box_b {
  :deep(.vxe-modal--wrapper .vxe-modal--content) {
    padding: 0.8em 0.8em;
    overflow: auto;
  }
  :deep(.el-input__wrapper) {
    width: 355px;
    box-shadow: none;
    background: #f7f9fa;
    padding: 0;
    flex-grow: 0;
  }
  :deep(.el-form-item__label) {
    font-size: 15px;
    color: #7a7a7ad6;
    font-weight: bolder;
    padding: 0 10px 0 0;
  }
  :deep(.el-form-item) {
    margin-bottom: 7px;
  }
  :deep(.el-form-item__content) {
    min-width: 240px;
  }
  :deep(.el-button--info) {
    --el-button-bg-color: #bfbfbf;
    --el-button-border-color: #bfbfbf;
  }
}
.vxe_box_c {
  :deep(.el-input__wrapper) {
    padding: 0;
    box-shadow: none;
    background: #f7f9fa;
  }
  :deep(.el-input-number) {
    width: 100px;
  }
}
.showLayer {
  border: 1px dashed #cbcbcb;
  width: 430px;
  height: 65px;
  border-radius: 10px;
  transform: translateX(25px);
  margin: 5px 0 10px 0;
  padding: 7px;
  display: flex;
}
.layerItem {
  border-radius: 5px;
  border: 1px solid #5a7af6;
  height: 17px;
  line-height: 8px;
  display: flex;
  // background: #e0e6fd;
  color: #5a7af6;
  font-size: 11px;
  font-weight: 600;
  padding-left: 10px;
  padding-top: 3.5px;
  padding-right: 5px;
  margin-right: 10px;
  cursor: pointer;
}
.layerItem:hover {
  background: #e0e6fd;
}
.layerItem_focus {
  border-radius: 5px;
  border: 1px solid #5a7af6;
  height: 17px;
  line-height: 8px;
  display: flex;
  background: #e0e6fd;
  color: #5a7af6;
  font-size: 11px;
  font-weight: 600;
  padding-left: 10px;
  padding-top: 3.5px;
  padding-right: 5px;
  margin-right: 10px;
  // cursor: pointer;
}
.layerItem_btn {
  display: inline-block;
  width: 10px;
  height: 10px;
  line-height: 7px;
  font-size: 13px;
}
.layerItem_btn:hover {
  color: red;
  cursor: pointer;
}
// 绘图透明度样式
.choose_transparency {
  margin-bottom: 30px;
}
// 绘图滑块
.slider-demo-block {
  display: flex;
  align-items: center;
}
.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 12px;
}
// 绘图图层下拉菜单
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
// 点绘图
.pointStyle {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  margin: 0 0 0 auto;
  font-weight: 600;
  color: #969696;
}
.pointStyle span {
  display: inline-block;
  margin-right: 10px;
}
#areaStyle {
  margin: 0 0 0 80px;

  :deep(.el-color-picker__trigger) {
    height: 29px;
    width: 29px;
  }
  :deep(.el-input-number) {
    width: 90px;
  }
}
</style>
